<template>
  <div>
    <header-com header-name="评论列表"></header-com>
    <div class="commentBox">
      <div class="commentBoxHeader">
        <div class="commentBoxHeaderLeft">
          <div style="">评论星级</div>
          <van-rate size="15px" style="margin-top: 17px;margin-left: 10px" color="#4bd863" v-model="totalStar" readonly />
        </div>
        <div class="commentBoxHeaderRight">
          好评率：100%
        </div>
      </div>
      <van-tabs style=" " @click="tabOnClick">
        <van-tab title="全部评论">
                <div style="width: 100%; height: 1px;background:rgb(243, 240, 240);"></div>
          <comment-item></comment-item>
          <comment-item></comment-item>
          <comment-item></comment-item>
        </van-tab>
        <van-tab title="有图评论">
          <div style="width: 100%; height: 1px;background:rgb(243, 240, 240);"></div>
          <comment-item></comment-item>

          <comment-item></comment-item>

        </van-tab>
      </van-tabs>

    </div>
  </div>

</template>
<script>
import commentItem from "@/components/commentItem/index";
import headerCom from "@/components/header/header";
export default {
name: "comment",
  data(){
  return{
    totalStar:5,
  }
  },
  methods:{
    tabOnClick(){

    }
  },
  components:{
  headerCom,
    commentItem
  }
}
</script>

<style scoped lang="less">
  .commentBox{
    .commentBoxHeader{
      height: 50px;
      line-height: 50px;
      display: flex;
      text-align: center;
      border-bottom: 1px solid red;
      .commentBoxHeaderLeft{
        flex: 1;
        display: flex;
        margin-left: 15px;
        font-size: 12px;
        border-right: 1px solid red;
      }
      .commentBoxHeaderRight{
        flex: 1;
      }
    }
  }
</style>
